Hello and welcome.
In this video we are going to create the projet directory the hastier mail.
So I'm going to create the directory on my desktop.
I'm just going to right click and go and you falder.
And I'm just going to call these.
I can quit later so you can call yours whatever name you like and you can create for them the same way
on a Mac and also on a window computer.
I will be using the sublime text editor as my editor for this page.
So I've got a new file here inside my editor.
Im just going to save this file as an hastier mail document.
I'm going to go file and I'm going to do this save as I'm saving it in to be free and just created I
call even b
dot H T L.
And I'll click on the drub and just select email I include save.
So any code I have in here now will be common.
Here's mail file so you can see on the bottom right of the text.
It is called hastier mail there.
So the way I'm going to approach this is I'm going to add the code in I've already pre stage to code.
So add the code.
Now explain what your code does.
Line by line I have added the Tier malcourt that we'll be using for this project so I am going to run
through the code with you line by line line and run.
Here is the dock type and the dock type is not actually part of the hastier mill document is basically
a declaration to web browsers to tell them that the content of the document is in hastier Mail 5 document
from line to to line 35 is the actual hastier million documents so any content we've been Line 2 to
35 is the email content.
So we have the head section which is on line 3 tool line 7.
So the information were being beheaded.
Search is not actually visible to the visitors of the application.
The only thing they can see in the title bar is the title of the application which will appear on the
title bar or Wembley application is launched on line 5.
I caught a link to the external style sheet.
I will be using for this project and when be his in the next term or see us as far.
I have called DPA might see us.
However I have not created a yet but when they do I will call it my DOT csx.
Okay you can see the real part.
This this attribute is called Real physically used when you are linking to an external stylesheet.
This is another attribute that tells you the type document is a text and also CSA the hatred attributed
physically.
It's a reference to where the file he's going to be looking to because is going to be located inside
the same direct mail file.
All we need to do is just include the name in quotes.
This is where the head section ends on line 7 the body section begins on line 9 and is online 34.
So any content inside the body tag is what is actually visible to the visitor inside the body tag on
line 11.
I've got a Deve element and I given it I did attribute of container.
So this is the opening.
And this is close in deep here so I'm basically wrapping all the content inside the Deve called container
inside the Dave.
I've got hey one head in.
This is going to form the title for the application and I have caught two or three inputs here.
This is going to be form form where are you going to import the actual value of your hideout in centimetre.
And you can see he is his height in 70 me.
This was just going to be a label for the impled box.
So where they need to enter their height in centimetre there's break here basically means it all give
a break between this import and this input here to have an input tag.
And I've got weight in kilograms this is bisley going to be the text next to the input.
Again given the import type text is the input type is a text.
And I've given it and I attribute centimetre.
Same thing with the weight here.
This input type is going to be a text input.
Again I'm giving it an I.D. value.
KG K G B basically means break so to leave it would jump on to the break can not kind of like Works
like a paragraph.
It just creates a break.
I've got another impled type.
This is going out the submit button and I give it to idea of sort submit.
The value is going to be cappalli at the bottom and watchfully read calculate and when you press on
the coquelin button it all to the actual calculation of the BMI.
Here we've got an idea and I've given it a value or result.
Again this is not a div.
People will display the results of the completed BMI So this is where the output will be rendered.
I've got the deal here coord weight guy.
This business really is just some text guide that will guide users to where they are under weight over
weight in relation to the beer.
My SO to just say be my weight guide.
If you are on the way this is of value and it is eighteen point six million or more.
No more range or normal weight would be eighteen point six and twenty four point nine to anything greater
than twenty four point nine is going to be regarded as overweight.
All right.
And this is where did Deve ends.
And just before the close in body tag got a discreet tag with this source source both women's wear might
get in the script from.
This is an a b b.
Still no javascript.
This is the javascript file that will contain whichever script that will be responsible for computing
or complete in the b.m. I am going to call the javascript fire BMI.
G.
S.
I have not created a yet but when I do I am going to call it B.
My g.
S and thus a closed script.
My closing body tag and my closing his team am just going to click on C to save all.
How quickly open up the file so we can see what it looks like someone opened up the directory and double
click on this so we can see.
Ah so this is what the cat collector looked that kind of momently BMI calculator.
So we're going to see SS later to make it look more presentable So that's it for this lecture.
We created the directory for the projet we've also created the hastier mail structure in the next charm.
Go add some see SS Before we go on in the show after that to create the javascript functionality.
Many thanks for watching and bye for now.